<template>
  <div>
    <van-search
      v-model="value"
      show-action
      placeholder="输入影院名称"
      @search="onSearch"
      @cancel="onCancel"
      style="position: sticky; top: 0"
    />
    <ul v-if="value">
      <template v-if="searchList.length > 0">
        <li
          v-for="cinema in searchList"
          :key="cinema.cinemaId"
          @click="handleFilm(cinema.cinemaId)"
        >
          <div class="col-1">
            <p>{{ cinema.name }}</p>
            <span>{{ cinema.address }}</span>
          </div>
          <div class="col-2">
            <div>
              ￥<span>{{ cinema.lowPrice / 100 }}</span
              >起
            </div>
            <p>距离未知</p>
          </div>
        </li>
      </template>
      <template v-else>
        <van-empty
          class="custom-image"
          :image="require('@/assets/search-null.png')"
          :style="{ height: calcHeight }"
        >
          <template #description>
            <p>没有搜索到匹配的影院</p>
            <p>提示：仅支持搜索“影院”，建议您检查输入的影院名称是否有误？</p>
          </template>
        </van-empty>
      </template>
    </ul>
    <div
      v-else
      :style="{ height: calcHeight }"
      style="background: #fff; margin-bottom: -49px"
    >
      <div class="near-box">
        <p class="near-text">离你最近</p>
        <div class="near">
          <span
            v-for="data in nearList"
            :key="data.cinemaId"
            @click="handleFilm(data.cinemaId)"
          >
            {{ data.name }}
          </span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import obj from '@/utils/mixin'
import { mapState, mapActions } from 'vuex'
export default {
  mixins: [obj],
  data () {
    return {
      value: '',
      calcHeight: '300px'
    }
  },
  computed: {
    ...mapState('city', ['cityId']),
    ...mapState('cinemaArea', ['cinemaList']),
    searchList () {
      return this.cinemaList.filter(
        (item) =>
          item.name.toUpperCase().includes(this.value.toUpperCase()) ||
          item.address.toUpperCase().includes(this.value.toUpperCase())
      )
    },
    nearList () {
      return this.cinemaList.length > 0 && this.cinemaList.slice(0, 5)
    }
  },
  created () {},
  mounted () {
    if (this.cinemaList.length === 0) {
      // this.$store.dispatch("getCinemaData", this.cityId);
      this.getCinemaData(this.cityId)
    }
    // navigate.geolocation.getCurrentPosition()

    this.calcHeight = document.documentElement.clientHeight - 54 + 'px'
    // onresize 事件会在窗口或框架被调整大小时发生
    window.onresize = () => {
      console.log(document.documentElement.clientHeight)
      this.calcHeight = document.documentElement.clientHeight - 54 + 'px'
    }
  },
  methods: {
    ...mapActions('cinemaArea', ['getCinemaData']),
    onSearch () {},
    onCancel () {
      this.$router.back()
    },
    handleFilm (cinemaId) {
      this.$router.push(`/cinema/${cinemaId}/film`)
    }
  }
}
</script>

<style scoped lang="scss">
ul {
  background: #fff;
  margin-bottom: -49px;
}

::v-deep .custom-image {
  text-align: center;

  .van-empty__image {
    width: 90px;
    height: 90px;
    position: absolute;
    top: 150px;
  }

  .van-empty__description {
    position: absolute;
    top: 230px;
  }

  p {
    color: #bdc0c5;
    font-size: 14px;
  }
}

li {
  padding: 15px;
  border-bottom: 1px solid #f8f8f8;
  display: flex;
  align-items: center;
}

.left-text {
  max-width: 60px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.col-1 {
  flex: 1;
  padding-right: 15px;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  width: calc(100% - 70px);
  box-sizing: border-box;

  p {
    font-size: 15px;
  }

  span {
    color: #797d82;
    font-size: 12px;
    margin: 5px 0 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 80%;
  }
}

.col-2 {
  width: 70px;
  height: 45px;
  text-align: right;

  div {
    color: #ff5f16;
    font-size: 12px;

    span {
      font-size: 15px;
    }
  }

  p {
    color: #797d82;
    font-size: 12px;
    margin: 5px 0 0;
  }
}

.near-box {
  padding: 0 15px 8px 0;
  margin-left: 15px;
  border-bottom: 1px solid #f8f8f8;

  .near-text {
    font-size: 13px;
    line-height: 13px;
    color: #bdc0c5;
    padding: 18px 0;
  }

  .near {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;

    span {
      height: 30px;
      background-color: hsla(0, 0%, 95.7%, 0.6);
      line-height: 14px;
      border-radius: 3px;
      box-sizing: border-box;
      font-size: 13px;
      padding: 8px 12px;
      margin: 0 10px 10px 0;
    }
  }
}
</style>
